<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>会员登录</title>
		<link rel="stylesheet" type="text/css" href="../css/login.css">
		<script type="text/javascript" src="../js/ajax-promise.js"></script>
	</head>
	<body>
		<div class="login">
			<div class="login_center">
				<div class="login_top">
					<div class="left fl">会员登录</div>
					<div class="right fr">您还不是我们的会员？<a href="./register.html" target="_self">立即注册</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div class="login_main center">
					<div class="username">用户名:&nbsp;<input class="shurukuang" type="text" id="userName" name="username" placeholder="请输入你的用户名"/></div>
					<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="shurukuang" type="password" name="password" id="mm1" placeholder="请输入你的密码"/></div>
					<div class="username" style="margin-bottom: 15px">
						<div class="left fl">验证码:&nbsp;<input class="yanzhengma" type="text" name="validatecode" placeholder="请输入验证码"/></div>
						<div class="right fl ran">
							<!-- <img id="codeImg" src="../validateCode/create">img的src是生成验证码的servlet资源 -->
						</div>
						<div class="clear"></div>
					</div>	
					<div class="login_submit" style="margin-top: 0px">
						<input class="submit" type="submit" onclick="return submitForm()" name="submit" value="立即登录" >
						<div style="margin-top: 10px;text-align: center"><span id="msg" style="color: red;font-size: 15px" ></span></div>
					</div>
				</div>
			</div>
			<div>
				<span class="msg"></span>
			</div>
		</div>


		<footer>
			<div class="copyright">简体 | 繁体 | English | 常见问题</div>
			<div class="copyright">蜜眸小铺公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div>

		</footer>
	</body>
		
		<!-- <script type="text/javascript">
		// 点击验证码图像，获取新的验证码
			$("#codeImg").click(function(){
				// 因为浏览器缓存的原因，如果src的路径相同，不会再次发送请求，所以在路径后增加随机值
				$(this).attr("src", "../validateCode/create?r=" + Math.random());
			})	
		</script> -->
	<script>
		var ran = document.querySelector(".ran")
		// function random(a,b){
		// 	return Math.round(Math.random()*(a-b)+b);
		// }
		function fn(){
			var str = '';
			for(i=0;i<4;i++){
				var num = Math.round(Math.random()*9);
				str += num; 
			}
			return str;
		}
        ran.innerHTML = fn();
	</script>
		

	<script>
		class Login{
			constructor(){
				this.user = document.getElementById("userName");
				this.pass = document.getElementById("mm1");
				// this.tpass = document.getElementById("mm2");
				this.submit = document.querySelector(".submit");
				this.msg = document.querySelector(".msg");

			// 提前准备接口
				this.url = "http://api.icodeilife.cn:81/user";

				this.addEvent()
			}


			addEvent(){
				var that = this;
				this.submit.onclick = function(){
				// 注册请求之前获取输入框内容
					that.u = that.user.value;
					that.p = that.pass.value;
					that.load();   //开启ajax请求
				}
			}
			load(){
				ajax({
					url:this.url,
					data:{      // 根据接口文档，发送数据
						type: "login",
						user: this.u,
						pass: this.p,
					}
				}).then((res)=>{
					// 请求成功后，查看数据，处理数据
					this.res = JSON.parse(res);
					// 渲染结果
					this.display();
				})
			}
			display(){
			// 根据成功或失败，决定后续操作
			switch(this.res.code){
                case 0:
                    this.msg.innerHTML = this.res.msg + "，即将跳转到注册页面";
                    setTimeout(() => {
                        location.href = "register.html";
                    }, 3000);
                    break;
                case 1:
                    this.msg.innerHTML = "登录成功，即将跳转到首页";
                    setTimeout(() => {
                        location.href = "../index.html";
                    }, 3000);

                    sessionStorage.setItem("userMsg",JSON.stringify(this.res.msg));
                    
                    break;
                case 2:
                    this.msg.innerHTML = this.res.msg + "，请重新输入";
                    this.user.value = this.pass.value = "";
                    this.user.focus();
				}
			}
		}

		new Login;
	</script>
		
		<!-- 如果有一个表单，现在想提交
		   1、form   action=“”   submit
		   2、点击提交  触发一个事件，在事件中获取表单数据，进行ajax提交
		   3、通过js获取form表单，$("#form").submit(function(){
		   
		      });
		
		 -->
		<!-- <script type="text/javascript">
			function submitForm(){
			      $.ajax({
						type:"post",
						url:"../user/login",
						data:$("form").serialize(),
						dataType:"json",
						success:function(data){
						    //alert(data);
							if(data == "1"){
							    $("#msg").text("");
							    //alert("成功");
								window.location.href = "index.html";
							}else{
								if(data == '3'){
								   $("#msg").text("验证码错误");
								}
								if(data == '2'){
								   $("#msg").text("账户或者密码错误");
								}
							}
						},
						error:function(data){
							//alert("error");
						}
				  });
				  
				  return false;
			
			} -->
					
		

</html>